<template>
	<view :data-theme="theme">
		<view class='sign'>
			<view class='header'>
				<view class="title mb30 flex">连续签到
					<view @click="toInfo()">
						<text class="iconfont icon-shuoming"></text>
					</view>
				</view>
				<view class='list acea-row row-center row-bottom'>
					<view class='item bg_color'>{{signCount[0] || 0}}</view>
					<view class='item bg_color'>{{signCount[1] || 0}}</view>
					<view class='item bg_color'>{{signCount[2] || 0}}</view>
					<view class='item bg_color'>{{signCount[3] || 0}}</view>
					<view class='data'>天</view>
				</view>
				<view class="acea-row row-center-wrapper">
					<view class='tip acea-row row-center-wrapper'>
						<image src="../static/images/jinbi.png"></image>
						<view>{{'今日签到+'+ integral + '积分，+' + experience + '经验' }}</view>
					</view>
				</view>
				<navigator hover-class='none'
					url='/pages/merchant/user_sgin_list/index'>
					<view class="record">
						签到记录
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</navigator>
			</view>

			<signCalendar :yearMonth="targetDate" :dataSource="signData" @dateChange="getSignInfo"
				@clickChange="clickSign">
			</signCalendar>
		</view>
		<view class='signTip acea-row row-center-wrapper' :class='active==true?"on":""'>
			<view class='signTipLight loadingpic'></view>
			<view class='signTipCon'>
				<view class="signTipBox"></view>
				<view class='state'>签到成功</view>
				<view class='integral'>获得{{integral}}积分，{{experience}}经验</view>
				<view class='signTipBnt' @click='close'>好的</view>
			</view>
		</view>
		<view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import signCalendar from '../components/signCalendar/index.vue';
	import Cache from '@/utils/cache';
	import {
		signInfo
	} from '@/api/user.js';
	import {
		setFormId
	} from '@/api/api.js';
	let app = getApp();
	export default {
		data() {
			return {
				active: false,
				theme: app.globalData.theme,
				targetDate: parseInt(new Date().getFullYear()) + "-" + parseInt(new Date().getMonth() + 1), //本月
				sumCount: 0,
				signData: [],
				signCount: [],
				integral: 0,
				experience: 0,
				month: '',
				preMoth: ''
			}
		},
		watch: {
			month(newVal) {
				let pre = Number(this.month)
				if (pre < 10) {
					this.preMoth = '0' + pre
				}  else {
					this.preMoth = pre
				}
				let next = Number(this.month) + 1
				if (next > 12) {
					this.nextMoth = '0' + 1
				} else if (next < 10) {
					this.nextMoth = '0' + next
				} else {
					this.nextMoth = next
				}
			}
		},
		onLoad: function(options) {
			uni.showLoading({
				title: "加载中",
				mask: true,
			});
			let now = new Date()
			this.year = now.getFullYear()
			let month = now.getMonth() + 1
			let pre = Number(month)
			if (pre < 10) {
				this.month = '0' + pre
			}  else {
				this.month = pre
			}
			this.getSignInfo(this.year + '-' + this.month);
		},
		components: {
			signCalendar
		},
		methods: {
			clickSign(day) {
				this.signData.push(day);
				this.sumCount++
			},
			/**
			 * 关闭签到提示
			 */
			close: function() {
				this.active = false;
			},
			/**
			 * 数字分割为数组
			 * @param int num 需要分割的数字
			 * @param int length 需要分割为n位数组
			 */
			PrefixInteger: function(num, length) {
				return (Array(length).join('0') + num).slice(-length).split('');
			},
			/**
			 * 获取签到页信息
			 */
			getSignInfo: function(month) {
				signInfo({
					month: month
				}).then(res => {
					uni.hideLoading();
					let data = res.data;
					this.signData = data.signDateList
					this.signCount = this.PrefixInteger(data.signDayNum, 4);
					this.integral = data.integral;
					this.experience = data.experience;
					Cache.set('signRule', data.signRule);
					if(data.isTip) this.active = true;
				}).catch(err => {
					uni.hideLoading();

				});
			},
			toInfo() {
				uni.navigateTo({
					url: `/pages/users/user_sgin_info/index`
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.signTip {
		width: 644rpx;
		height: 645rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -322rpx;
		margin-top: -322.5rpx;
		z-index: 99;
		text-align: center;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
		.signTipLight {
			background-image: url('');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
		.signTipCon {
			background-image: url('');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 420rpx;
			height: 420rpx;
			margin-top: -700rpx;
			position: relative;
			.state {
				font-size: 34rpx;
				color: #fff;
				margin-top: 150rpx;
			}
			.integral {
				font-size: 30rpx;
				color: rgba(255, 255, 255, 0.6);
				margin-top: 9rpx;
			}
			.signTipBnt {
				font-size: 30rpx;
				@include main_color(theme);
				width: 260rpx;
				height: 76rpx;
				@include second-gradient(theme);
				border-radius: 38rpx;
				line-height: 76rpx;
				margin: 48rpx auto 0 auto;
			}
		}
	}

	.on {
		opacity: 1;
		transform: scale(1);
	}
	.signTipBox{
		@include main_bg_color(theme);
		height: 360rpx;
		width: 100%;
		position: absolute;
		bottom: 0;
		z-index: -1;
	}

	.sign {
		.header {
			width: 100%;
			height: 542rpx;
			background: url('') no-repeat;
			background-size: 100% 100%;
			@include main_bg_color(theme);
			padding-top: 60rpx;
		}

		.title {
			color: #FFFFFF;
			font-size: 30rpx;
			text-align: center;
			justify-content: center;

			.icon-shuoming {
				font-size: 30rpx;
				margin-left: 12rpx;
			}
		}

		.tip {
			margin-top: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #fff;
			background-color: #FFB22D;
			box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
			border-radius: 27rpx;
			opacity: 1;
			padding: 0 17rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 5rpx;
			}
		}
	}

	.icon-xiangyou {
		font-size: 22rpx;
	}

	.record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 40rpx;
		right: 0;
		color: #FFDDB8;
		font-size: 22rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8rpx 18rpx;
		border-radius: 20px 0px 0px 20px;
	}

	.list {
		.item {
			width: 80rpx;
			height: 116rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			@include main_color(theme);
			font-size: 72rpx;
			font-weight: bold;
			text-align: center;
			line-height: 116rpx;
			margin-right: 19rpx;
			border-radius: 8rpx;
			background-image: url('');
		}

		.data {
			font-size: 30rpx;
			color: #fff;
		}
	}
</style>
